<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {load href='/static/css/bootstrap.css'}
    {load href='/static/css/all.css'}
    {load href='/static/js/jquery-3.4.1.min.js'}
    {load href='/static/js/bootstrap.min.js'}
    {load href='/static/js/bootbox.min.js'}
    <style>
        .pagination{float:right}
        .pagination>li{margin-left: 4px;}
        .container-furid{
            width: 80%;

        }
        body{position:relative;box-sizing: border-box;font-size: 12px;justify-content: right;align-items: center;display: flex;background-color: rgba(220, 220, 220, 0);margin-right: 4%;}
        .btn{
            width: 82px; /* 设置按钮宽度为 80 像素，可根据实际需求调整数值 */
            height: 30px; /* 设置按钮高度为 30 像素，可根据实际需求调整数值 */
            font-size: 12px; /* 同时可以适当调小按钮文字的字体大小，让整体更协调 */
            padding: 5px 10px;
        }
        .form-control{
            height: 30px;
        }
    </style>
</head>
<body>
<div class="container-furid" style="padding: 0px">
    <div class="row" style="padding-left: 20px">
        <form class="form-inline" action="" style="margin: 10px 0">
            <input id="key" type="text" class="form-control" name="key"  placeholder="输入日期(yyyy-mm-dd)">&nbsp;&nbsp;

            <button type="submit" class="btn btn-primary" id="search"><span class="fa fa-search"></span>&nbsp;&nbsp;搜索</button>&nbsp;&nbsp;

            <button type="button" class="btn btn-primary btn-edit" data-toggle='modal' data-target='#addModal' data-backdrop='static'></span>&nbsp;&nbsp;上班打卡</button>

        </form>
    </div>
    <table class="table table-hover" border="1">
        <tr style="background: #e7c3c3"><th>ID</th><th>姓名</th><th>部门</th><th>上班打卡</th><th>下班打卡</th><th>备注</th><th>操作</th></tr>
        {volist name='data' id='v'}
        <tr style="background: #9acfea"><td>{$v.id}</td><td>{$v.name}</td><td>{$v.department}</td><td>{$v.sb}</td><td>{$v.xb}</td><td>{$v.add}</td>
            <td><button class="btn btn-primary btn-edit" data-toggle='modal' data-target='#editModal' data-backdrop='static' onclick="edit({$v.num})"><span class="fa fa-edit"></span>下班打卡</button></td></tr>
        {/volist}
    </table>
    {$data|raw}
</div>
</body>
</html>
<div class="modal" id="addModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">添加打卡记录</div>
                <button class="close" data-dismiss='modal'>&times;</button>
            </div>
            <div class="modal-body">
                <form action="" id="addForm">
                    <!--                    <input type="hidden" id="num" name="num">-->
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="">ID：</label>
                                <input type="text" class="form-control" id="" name="id" value="{$id}" readonly>
                            </div>
                            <div class="col-sm-6">
                                <label for="">姓名：</label>
                                <input type="text" class="form-control" id="" name="name" value="{$xm}" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="">上班打卡：</label>
                                <input type="text" class="form-control" id="" name="sb" value="{$time1}" readonly>
                            </div>
                            <div class="col-sm-6">
                                <label for="">下班打卡：</label>
                                <input type="datetime-local" class="form-control" id="" name="xb" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="">部门：</label>
                                <input type="text" class="form-control" id="" name="department" value="{$bm}" readonly>
                            </div>
                            <div class="col-sm-6">
                                <label for="">备注：</label>
                                <input type="text" class="form-control" id="" name="add" required>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="add()">上班打卡</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="editModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">添加打卡记录</div>
                <button class="close" data-dismiss='modal'>&times;</button>
            </div>
            <div class="modal-body">
                <form action="" id="editForm">
                    <input type="hidden" id="num" name="num">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="id">ID：</label>
                                <input type="text" class="form-control" id="id" name="id" readonly>
                            </div>
                            <div class="col-sm-6">
                                <label for="name">姓名：</label>
                                <input type="text" class="form-control" id="name" name="name" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="sb">上班打卡：</label>
                                <input type="text" class="form-control" id="sb" name="sb" readonly>
                            </div>
                            <div class="col-sm-6">
                                <label for="">下班打卡：</label>
                                <input type="text" class="form-control" id="" name="xb" value="{$time2}" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="bm">部门：</label>
                                <input type="text" class="form-control" id="bm" name="department" readonly>
                            </div>
                            <div class="col-sm-6">
                                <label for="bz">备注：</label>
                                <input type="text" class="form-control" id="bz" name="add" >
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="update()">下班打卡</button>
            </div>
        </div>
    </div>
</div>
<script>
    function del(id){
        bootbox.confirm("确实要删除该记录吗",function(res){
            if(res){
                $.get("/index.php/workr/del",{'id':id},function(res1){
                    if(res1==1){
                        bootbox.alert("删除记录成功",function(){
                            window.location.reload();
                        })
                    }
                })
            }
        })
    }

    function edit(id){
        $.get("/index.php/Workr/edit",{'id':id},function(res){
            $("#name").val(res.name);
            $("#num").val(res.num);
            $("#id").val(res.id);
            $("#sb").val(res.sb);
            $("#bm").val(res.department);
            $("#bz").val(res.add);
        });
    }

    function update(){
        $.post("/index.php/Workr/update",$("#editForm").serialize(),function(res){
            if(res==1){
                bootbox.alert("打卡成功",function(){
                    window.location.reload();
                })
            }else{
                bootbox.alert("打卡失败");
            }
        });
    }
    function add() {
        $.post("/index.php/Workr/insert", $("#addForm").serialize(), function (res) {
            if (res > 0) {
                bootbox.alert("打卡成功", function () {
                    window.location.reload();
                });
            } else {
                bootbox.alert("打卡失败");
            }
        })
    }
</script>